<template>
  <div class="community" :style="{
		background:bottomBgColor,
		marginTop:mTop+'px',
		paddingTop:topConfig+'px',
		paddingBottom:bottomConfig+'px',
		paddingLeft:prConfig+'px',
		paddingRight:prConfig+'px'
	}">
    <div class="nav acea-row row-between-wrapper" :style="{
			background:`linear-gradient(90deg,${headerBgColorLeft} 0%,${headerBgColorRight} 100%)`,
			borderRadius: bgRadius
		}">
      <div class="title" v-if="titleConfig"
           :style="(titleTabVal==2?'fontStyle:':'fontWeight:') + titleText+';color:'+titleColor+';fontSize:'+titleNumber+'px;'">
        {{ titleTxtConfig }}
      </div>
      <img v-else :src="imgUrl" alt=""/>
      <div class="more" :style="{
				color:headerBntColor,
				fontSize:bntNumber+'px'
			}">{{ rightBntConfig }}<span class="iconfont iconjinru" :style="{
				fontSize:bntNumber+'px'
			}"></span></div>
      <img class="clover" src="@/assets/images/clover.png"/>
    </div>
    <div v-if="!styleConfig" class="list on acea-row row-middle" :style="{
			background: bgColor,
			borderRadius: bgRadius2
		}">
      <div class="item" :style="{
				marginRight:videoSpace2+'px'
			}" v-for="(item,index) in videoList" :key="index">
        <div class="pictrue">
          <img :style="{
						borderRadius:imgRadius
					}" v-if="item.image" :src="item.image">
          <div v-else class="empty-box" :style="{
						borderRadius:imgRadius
					}">
            <img src="../../assets/images/shan.png"/>
          </div>
          <div class="mask" :style="{borderRadius:imgRadius}"></div>
          <div class="bottom">
            <div class="title line1">{{item.desc}}</div>
            <div class="acea-row row-middle mt5">
              <div class="user">
                <img src="@/assets/images/f.png"/>
              </div>
              <div class="name line1">{{item.type_name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="list acea-row row-between" :style="{
			background: bgColor,
			borderRadius: bgRadius2
		}">
      <div class="item" :style="{
				marginBottom:videoSpace+'px'
			}" v-for="(item,index) in videoList" :key="index">
        <div class="pictrue">
          <img :style="{
						borderRadius:imgRadius
					}" v-if="item.image" :src="item.image">
          <div v-else class="empty-box" :style="{
						borderRadius:imgRadius
					}">
            <img src="../../assets/images/shan.png"/>
          </div>
        </div>
        <div class="info">
          <div class="title">{{item.desc}}</div>
          <div class="txtPic acea-row row-between-wrapper">
            <div class="acea-row row-middle">
              <div class="user">
                <img src="@/assets/images/f.png"/>
              </div>
              <div class="name line1">{{item.type_name}}</div>
            </div>
            <div class="num"><span class="iconfont iconic_Like"
                                   :style="{color:toneConfig?`${likeSuccessColor}`:`${colorStyle.theme}`}"></span>212
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import {videoList} from '@/api/marketing'

export default {
  name: 'home_community',
  cname: '种草社区',
  configName: 'c_community',
  icon: '#iconzujian-zhongcaoshequ',
  type: 1,// 0 基础组件 1 营销组件 2工具组件
  defaultName: 'community', // 外面匹配名称
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    },
    colorStyle: {
      type: null
    }
  },
  computed: {
    ...mapState('admin/mobildConfig', ['defaultArray'])
  },
  watch: {
    pageData: {
      handler(nVal, oVal) {
        this.setConfig(nVal, 1)
      },
      deep: true
    },
    num: {
      handler(nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
        this.setConfig(data)
      },
      deep: true
    },
    'defaultArray': {
      handler(nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
        this.setConfig(data, 1);
      },
      deep: true
    }
  },
  data() {
    return {
      // 默认初始化数据禁止修改
      defaultConfig: {
        cname: '种草社区',
        name: 'community',
        timestamp: this.num,
        isHide: false,
        setUp: {
          tabVal: 0
        },
        titleLeft: '内容设置',
        titleHead: '头部设置',
        titleContent: '内容展示',
        titleRight: '头部样式',
        titleVideoStyle: '内容样式',
        titleCurrency: '通用样式',
        styleConfig: {
          title: '选择风格',
          tabVal: 0,
          tabList: [
            {
              name: '左右滑动展示'
            },
            {
              name: '两列展示（纵向）'
            }
          ]
        },
        titleConfig: {
          title: '标题类型',
          tabVal: 0,
          tabList: [
            {
              name: '图片'
            },
            {
              name: '文字'
            }
          ]
        },
        imgConfig: {
          info: '建议：128px * 32px',
          url: require('@/assets/images/community.png'),
          type: 'code',
          delType: 0,
          name: '上传图片'
        },
        titleTxtConfig: {
          title: '标题文字',
          value: '种草社区',
          place: '请输入标题文字',
          max: 6
        },
        rightBntConfig: {
          title: '右侧文字',
          value: '好物分享',
          place: '请输入右侧文字',
          max: 6
        },
        numberConfig: {
          title: '内容数量',
          val: 3,
          min: 1
        },
        selectConfig: {
          title: '内容话题',
          activeValue: '',
          list: [
            {
              activeValue: '',
              title: ''
            },
            {
              activeValue: '',
              title: ''
            }
          ]
        },
        headerBgColor: {
          title: '背景颜色',
          name: 'headerBgColor',
          default: [
            {
              item: '#E93323'
            },
            {
              item: '#FF7931'
            }
          ],
          color: [
            {
              item: '#E93323'
            },
            {
              item: '#FF7931'
            }
          ]
        },
        titleText: {
          title: '标题文字',
          tabVal: 0,
          tabList: [
            {
              name: '加粗',
              style: 'bold'
            },
            {
              name: '正常',
              style: 'normal'
            },
            {
              name: '倾斜',
              style: 'italic'
            }
          ]
        },
        titleColor: {
          title: '标题颜色',
          name: 'titleColor',
          default: [
            {
              item: '#fff'
            }
          ],
          color: [
            {
              item: '#fff'
            }
          ]
        },
        titleNumber: {
          title: '标题字号',
          val: 16,
          min: 0
        },
        headerBntColor: {
          title: '按钮文字',
          name: 'headerBntColor',
          default: [
            {
              item: '#fff'
            }
          ],
          color: [
            {
              item: '#fff'
            }
          ]
        },
        bntNumber: {
          title: '按钮大小',
          val: 12,
          min: 0
        },
        videoSpace: {
          title: '内容间距',
          val: 20,
          min: 0
        },
        videoSpace2: {
          title: '内容间距',
          val: 10,
          min: 0
        },
        filletImg: {
          title: '内容圆角',
          type: 0,
          list: [
            {
              val: "全部",
              icon: "iconcaozuo-zhengti",
            },
            {
              val: "单个",
              icon: "iconcaozuo-bianjiao",
            }
          ],
          valName: '圆角值',
          val: 8,
          min: 0,
          valList: [
            {val: 0},
            {val: 0},
            {val: 0},
            {val: 0}
          ]
        },
        toneConfig: {
          title: '色调',
          tabVal: 0,
          tabList: [
            {
              name: '跟随主题风格'
            },
            {
              name: '自定义'
            }
          ]
        },
        likeSuccessColor: {
          title: '点赞成功',
          default: [
            {
              item: '#E93323'
            }
          ],
          color: [
            {
              item: '#E93323'
            }
          ]
        },
        moduleColor: {
          title: '组件背景',
          default: [
            {
              item: '#fff'
            },
            {
              item: '#fff'
            }
          ],
          color: [
            {
              item: '#fff'
            },
            {
              item: '#fff'
            }
          ]
        },
        bottomBgColor: {
          title: '底部背景',
          default: [
            {
              item: '#f5f5f5'
            }
          ],
          color: [
            {
              item: '#f5f5f5'
            }
          ]
        },
        topConfig: {
          title: '上边距',
          val: 0,
          min: 0
        },
        bottomConfig: {
          title: '下边距',
          val: 0,
          min: 0
        },
        prConfig: {
          title: '左右边距',
          val: 10,
          min: 0
        },
        mbConfig: {
          title: '页面上间距',
          val: 0,
          min: 0
        },
        fillet: {
          title: '背景圆角',
          type: 0,
          list: [
            {
              val: "全部",
              icon: "iconcaozuo-zhengti",
            },
            {
              val: "单个",
              icon: "iconcaozuo-bianjiao",
            }
          ],
          valName: '圆角值',
          val: 8,
          min: 0,
          valList: [
            {val: 0},
            {val: 0},
            {val: 0},
            {val: 0}
          ]
        }
      },
      pageData: {},
      videoList: [],
      numberConfig: 0,
      headerBgColorLeft: '',
      headerBgColorRight: '',
      styleConfig: 0,
      titleConfig: 0,
      imgUrl: '',
      headerBntColor: '',
      rightBntConfig: '',
      titleTxtConfig: '',
      numberConfig: 0,
      titleText: 0,
      titleColor: '',
      titleNumber: 0,
      videoSpace: 0,
      videoSpace2: 0,
      imgRadius: 0,
      bgColor: '',
      bgRadius: 0,
      bgRadius2: 0,
      bottomBgColor: '',
      mTop: 0,
      topConfig: 0,
      bottomConfig: 0,
      prConfig: 0,
      bntNumber: 0,
      toneConfig: 0,
      likeSuccessColor: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
      this.setConfig(this.pageData);
    })
  },
  methods: {
    getVideoList(limit) {
      this.videoList = [
        {
          image: require('@/assets/images/shequ_1.png'),
          like_num: 120,
          type_image: require('@/assets/images/yonghu.png'),
          type_name: '浅笑回眸',
          desc: '啊啊啊啊啊啊啊！！就这条吊带裙绝了！',
          product_num: 3,
        },
        {
          image: require('@/assets/images/shequ_2.png'),
          like_num: 120,
          type_image: require('@/assets/images/yonghu.png'),
          type_name: '国宝小熊猫',
          desc: '像我这种梨形身材又不想露腿的 就喜欢这种裙摆...',
          product_num: 3,
        },
        {
          image: require('@/assets/images/shequ_4.png'),
          like_num: 120,
          type_image: require('@/assets/images/yonghu.png'),
          type_name: '阿秋',
          desc: '观看视频麦葱更多好礼等你来抢，每天都有哟～ 更多好礼请联…',
          product_num: 3,
        }
      ]
    },
    setConfig(data, num) {
      if (!data) return
      if (data.mbConfig) {
        this.headerBgColorLeft = data.headerBgColor.color[0].item;
        this.headerBgColorRight = data.headerBgColor.color[1].item;
        this.styleConfig = data.styleConfig.tabVal;
        this.titleConfig = data.titleConfig.tabVal;
        this.imgUrl = data.imgConfig.url;
        this.headerBntColor = data.headerBntColor.color[0].item;
        this.rightBntConfig = data.rightBntConfig.value;
        this.titleTxtConfig = data.titleTxtConfig.value;
        this.numberConfig = data.numberConfig.val;
        this.bntNumber = data.bntNumber.val;
        let tabVal = data.titleText.tabVal;
        this.titleTabVal = tabVal;
        this.titleText = data.titleText.tabList[tabVal].style;
        this.titleColor = data.titleColor.color[0].item;
        this.titleNumber = data.titleNumber.val;
        this.videoSpace = data.videoSpace.val;
        this.videoSpace2 = data.videoSpace2.val;
        this.toneConfig = data.toneConfig.tabVal;
        this.likeSuccessColor = data.likeSuccessColor.color[0].item;
        let filletImg = data.filletImg.type;
        let filletValImg = data.filletImg.val;
        let valListImg = data.filletImg.valList;
        this.imgRadius = filletImg ? valListImg[0].val + 'px ' + valListImg[1].val + 'px ' + valListImg[3].val + 'px ' + valListImg[2].val + 'px' : filletValImg + 'px';
        let bgColorLeft = data.moduleColor.color[0].item;
        let bgColorRight = data.moduleColor.color[1].item;
        this.bgColor = `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`;
        let fillet = data.fillet.type;
        let filletVal = data.fillet.val
        let valList = data.fillet.valList;
        this.bgRadius = fillet ? valList[0].val + 'px ' + valList[1].val + 'px 0 0' : filletVal + 'px ' + filletVal + 'px 0 0';
        this.bgRadius2 = fillet ? '0 0 ' + valList[3].val + 'px ' + valList[2].val + 'px' : '0 0 ' + filletVal + 'px ' + filletVal + 'px';
        this.bottomBgColor = data.bottomBgColor.color[0].item;
        this.mTop = data.mbConfig.val;
        this.topConfig = data.topConfig.val;
        this.bottomConfig = data.bottomConfig.val;
        this.prConfig = data.prConfig.val;
        if (num) {
          this.getVideoList(this.numberConfig);
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.community {
  .nav {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    position: relative;
    overflow: hidden;

    img {
      width: 64px;
      height: 16px;
      display: block;
    }

    .clover {
      width: 52px;
      height: 54px;
      display: block;
      position: absolute;
      top: 9px;
      right: 91px;
    }

    .title {
      color: #333333;
      font-size: 15px;
    }

    .more {
      font-weight: 400;
      color: #999999;
      font-size: 12px;

      .iconfont {
        font-size: 12px;
      }
    }
  }

  .list {
    padding: 12px 10px;

    &.on {
      flex-wrap: nowrap;
      overflow: hidden;

      .item {
        margin-right: 12px;
        margin-bottom: 0;

        .pictrue {
          width: 140px;
          height: 175px;
          border-radius: 8px;

          .bottom {
            color: #fff;
            font-weight: 400;
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 6px 8px;
            z-index: 10;

            .title {
              font-size: 12px;
            }

            .name {
              font-size: 9px;
              width: 100px;
            }

            .user {
              width: 17px;
              height: 17px;
              border-radius: 50%;
              margin-right: 4px;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
          }
        }
      }
    }

    .item {
      margin-bottom: 20px;

      &:nth-last-child(1) {
        margin-bottom: 0 !important;
      }

      .pictrue {
        width: 164px;
        height: 205px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .empty-box {
          background-color: #F3F9FF;

          img {
            width: 65px;
            height: 50px;
            display: block;
          }
        }
      }

      .info {
        font-weight: 400;
        width: 164px;

        .title {
          font-size: 13px;
          color: #333333;
          margin-top: 10px;
        }

        .num {
          font-size: 10px;
          color: #999999;

          .iconfont {
            margin-right: 5px;
            font-size: 12px;
          }
        }

        .txtPic {
          margin-top: 11px;

          .user {
            width: 16px;
            height: 16px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .name {
            font-size: 10px;
            color: #999999;
            margin-left: 4px;
          }
        }
      }
    }
  }
}
</style>
